<template>
    <div class="outmain ba_f templateMall">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="装修列表" name="1"></el-tab-pane>
        <el-tab-pane label="模板商城" name="2"></el-tab-pane>
      </el-tabs>
      <div class="mar_t20">
        <div class="template-list">
            <div class="flex-box template">
              <div class="bg">
                <img src="./template/style6/muban6.png" class="image">
              </div>
              <div class="template-footer mar_t20 flex-bet">
                <div>蛋糕店模板</div>
                <div><el-button plain size="small" @click="user(6)">一键使用</el-button></div>
              </div>
            </div>
            <div class="flex-box template">
              <div class="bg">
                <img src="./template/style2/muban2.png" class="image">
              </div>
              <div class="template-footer mar_t20 flex-bet">
                <div>水果店模板</div>
                <div><el-button plain size="small" @click="user(2)">一键使用</el-button></div>
              </div>
            </div>
            <div class="flex-box template">
              <div class="bg">
                <img src="./template/style3/muban3.png" class="image">
              </div>
              <div class="template-footer mar_t20 flex-bet">
                <div>轻食店模板</div>
                <div><el-button plain size="small" @click="user(3)">一键使用</el-button></div>
              </div>
            </div>
            <div class="flex-box template">
              <div class="bg">
                <img src="./template/style4/muban4.png" class="image">
              </div>
              <div class="template-footer mar_t20 flex-bet">
                <div>甜品店模板</div>
                <div><el-button plain size="small" @click="user(4)">一键使用</el-button></div>
              </div>
            </div>
            <div class="flex-box template">
              <div class="bg">
                <img src="./template/style5/muban5.png" class="image">
              </div>
              <div class="template-footer mar_t20 flex-bet">
                <div>奶茶店模板</div>
                <div><el-button plain size="small" @click="user(5)">一键使用</el-button></div>
              </div>
            </div>
            <div class="flex-box template">
              <div class="bg">
                <img src="./template/style1/muban1.png" class="image">
              </div>
              <div class="template-footer mar_t20 flex-bet">
                <div>过审模板</div>
                <div><el-button plain size="small" @click="user(1)">一键使用</el-button></div>
              </div>
            </div>
        </div>
      </div>
    </div>
</template>
<script>
    import {dragSave} from "@/api/renovation";
    import template1 from './template/template1.js'
    import template2 from './template/template2.js'
    import template3 from './template/template3.js'
    import template4 from './template/template4.js'
    import template5 from './template/template5.js'
    import template6 from './template/template6.js'

    export default {
        created() {

        },
        data() {
            return {
                activeName:'2',
            }
        },
        methods: {
          handleClick() {
            if (this.activeName == '1') {
              this.$router.push(`/renovationindex`);
            } else if (this.activeName == '2') {
              this.$router.push(`/templatemall`);
            }
          },
          user(type){
            var tem = ''
            switch (type) {
              case 1:
                tem = template1
                this.dragSave(tem)
                break;
              case 2:
                tem = template2
                this.dragSave(tem)
                break;
              case 3:
                tem = template3
                this.dragSave(tem)
                break;
              case 4:
                tem = template4
                this.dragSave(tem)
                break;
              case 5:
                tem = template5
                this.dragSave(tem)
                break;
              case 6:
                tem = template6
                this.dragSave(tem)
                break;
            }
          },
          async dragSave(tem){
            const {msg} = await dragSave(tem);
            this.$baseMessage(msg, "success");
            this.activeName = '1'
            this.$router.push(`/renovationindex`);
          },
        }
    }
</script>
<style lang="scss" scoped>
.templateMall{
  .el-col-offset-1 {
    //margin-left: 2.16667%;
  }
  .template-list{
    display: flex;
    flex-wrap: wrap;
    .flex-box {
      height: 428px;
      width: 296px;
      margin-left: 20px;
      margin-bottom: 20px;
      padding: 0 12px 12px;
    }
    .template {
      border: 1px solid #f1f1f1;
      border-radius: 4px;
      position: relative;
      overflow: hidden;
      .bg{
        height: 355px;
        overflow: hidden;
      }
      img {
        border-radius: 4px;
        width: 272px;
        height: auto;
        display: block;
        transform: translate(-1px,-1px);
        margin-top: 12px;
      }
    }
  }
  .template:hover {
    box-shadow: 0 0 16px 2px hsl(0deg 0% 66% / 25%);
  }
}
</style>
